// 基本信息
import DialogBox from "@/components/DialogBox";
import SelectDeviceListAll from "@/components/Sansan/SelectDeviceListAll";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("rule_detaildialog.formrule.name"), trigger: "change" }]
		});

		const state = reactive({
			productList: [],
			deviceList: [],
			bindType: "product"
		});
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					props.detail.productId = state.productList.map((item: any) => item.model).join(",");
					props.detail.devSn = state.deviceList.join(",");
					emit("submit");
				}
			});
		};
		watchEffect(() => {
			if (attrs.visible) {
				//默认为软规则
				state.bindType = props.detail.productId ? "product" : "device";
				//多选扩展字段
				state.productList = props.detail.productId ? props.detail.productId?.split(",") : [];
				state.deviceList = props.detail.devSn ? props.detail.devSn?.split(",") : [];
			}
		});
		const changeBindType = () => {
			state.deviceList = [];
			props.detail.devSn = "";
			state.productList = [];
			props.detail.productId = "";
		};
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label={proxy?.$t("rule_detaildialog.form_label.name")} prop="name">
							<el-input v-model={props.detail.name} placeholder={proxy?.$t("rule_detaildialog.placeholder.name")} />
						</el-form-item>
						<el-form-item label={proxy?.$t("rule_detaildialog.form_label.bind_type")} prop="bindType">
							<el-select v-model={state.bindType} onChange={() => changeBindType()}>
								<el-option label={proxy?.$t("rule_detaildialog.option.product")} value="product"></el-option>
								<el-option label={proxy?.$t("rule_detaildialog.option.device")} value="device"></el-option>
							</el-select>
						</el-form-item>
						{state.bindType == "product" ? (
							<el-form-item label={proxy?.$t("rule_detaildialog.form_label.product_id")} prop="productId">
								<SelectProductList multiple v-model={state.productList} detail={{ type: "all" }} />
							</el-form-item>
						) : null}
						{state.bindType == "device" ? (
							<el-form-item label={proxy?.$t("rule_detaildialog.form_label.devsn")} prop="devSn">
								<SelectDeviceListAll multiple v-model={state.deviceList} />
							</el-form-item>
						) : null}
						<el-form-item label={proxy?.$t("rule_detaildialog.form_label.desc")} prop="desc">
							<el-input
								v-model={props.detail.desc}
								placeholder={proxy?.$t("rule_detaildialog.input_placeholder.desc")}
								type="textarea"
								auto-size
							/>
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
